<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="t" %>
<%
	request.setAttribute("path", request.getContextPath());
%>
<!DOCTYPE html>
<html>
<head>
	<title>致-青春 ${userInfo.usr }的设置</title>
	<link rel="stylesheet" type="text/css" href="${path}/css/base.css" />
	<link rel="stylesheet" type="text/css" href="${path}/js/ui/css/ui-darkness/jquery-ui-1.10.3.custom.min.css" />
	<script type="text/javascript" src="${path}/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="${path}/js/ui/js/jquery-ui-1.10.3.custom.min.js"></script>
	  <style>
	  #feedback { font-size: 1.4em; }
	  #selectable .ui-selecting { background: #FECA40; }
	  #selectable .ui-selected { background: #F39814; color: white; }
	  #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
	  #selectable li { margin: 3px; padding: 2px; float: left; width: 80px; height: 80px; font-size: 4em; text-align: center; }
	  </style>
	  <script>
	  $(function() {
	    $( "#selectable" ).selectable({
	    	  selected: function( event, ui ) {
	    		  var selected = $("li[class$='ui-selected']");
                  $("input[name='avatar']").val(selected.find("img").attr("kkk"));
	    	  }
	    });
	  });
	  </script>
</head>
<body>
	<div id="container">
		<jsp:include page="/page/common/header.jsp"></jsp:include>
		<div id="kernel" class="center-box">
		<h2>${userInfo.usr }的账号</h2>
		<form name='f1' method="post" action="">
			<input type="hidden" name="avatar" value="0" />
			<table>
					<tbody>
					<tr>
						<td>邮箱</td>
						<td>
							${userInfo.email }
						</td>
					</tr>
					<tr>
						<td>名号</td>
						<td>
							 <input name="usr" value="${userInfo.usr }" />
						</td>
					</tr>
					<tr>
						<td>常居地</td>
						<td>
							<select name="city">
								<option value="1">北京</option>
								<option value="4" <c:if test="${userInfo.city == 4 }">selected</c:if>>重庆</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>头像</td>
						<td>
							<%-- <select name="avatar">
								<option value="avatar1.jpg"><img src="${path }/img/avatar/avatar1.jpg" style="width:50px; height: 50px;" /></option>
								<option value="avatar2.jpg"><img src="${path }/img/avatar/avatar2.jpg" style="width:50px; height: 50px;" /></option>
								<option value="avatar3.jpg"><img src="${path }/img/avatar/avatar3.jpg" style="width:50px; height: 50px;" /></option>
							</select> --%>
							<ol id="selectable">
							  <li class="ui-state-default"><img src="${path }/img/avatar/avatar1.jpg" style="width:80px; height: 80px;" kkk="avatar1.jpg" /></li>
							  <li class="ui-state-default"><img src="${path }/img/avatar/avatar2.jpg" style="width:80px; height: 80px;" kkk="avatar2.jpg" /></li>
							  <li class="ui-state-default"><img src="${path }/img/avatar/avatar3.jpg" style="width:80px; height: 80px;" kkk="avatar3.jpg" /></li>
							</ol>
						</td>
					</tr>
					<tr>
						<td>个人介绍</td>
						<td>
							<textarea rows="" cols="" name="intro">${userInfo.intro }</textarea>
						</td>
					</tr>
					<tr>
						<td colspan="2">
						 <input type="submit" value="提交"> 
						</td>
					</tr>
				</tbody>
				</table>
		</form>
		</div>
		<jsp:include page="/page/common/footer.jsp"></jsp:include>
	</div>
</body>
</html>